<template>
  <div class="setting">
    <div class="title">
      <div class="block"></div>
      <div class="word">平台设置</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="setting-content-title">平台信息设置</div>

    <div class="setting-content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="平台名称:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="平台标题:" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="平台描述:" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>

        <el-form-item label="关键词:" prop="keyword">
          <el-input v-model="ruleForm.keyword"></el-input>
        </el-form-item>

        <el-form-item label="平台LOGO:" prop="logo">
          <!-- <el-upload
            class="upload-demo"
            drag
            action="http://localhost:8100/api/platform/updateInfo"
            multiple
            :on-preview="handlePictureCardPreview"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过50kb
            </div>
          </el-upload> -->
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :http-request="selectPicUpload"
          >
            <!-- <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/api/platform/updateInfo"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :name="logo"
            :headers="token"
          > -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <input type="file" :change="ruleForm.imageUrl"> -->
        </el-form-item>

        <el-form-item label="客服热线:" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>

        <el-form-item label="客服邮箱:" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updateInfo, getInfo, updateInfoPhoto } from "@/api/index";

import qs from "qs";

export default {
  name: "setting",
  inject: ["reload"],
  components: {},
  data() {
    return {
      config: {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      },

      token: { Authorization: sessionStorage.getItem("Authorization") },
      formData: new FormData(),
      imageUrl: "",
      logo: "logo",
      ruleForm: {
        name: "",
        title: "",
        description: "",
        keyword: "",
        logo: "",
        phone: "",
        email: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入平台名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        title: [
          { required: true, message: "请输入平台标题", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入平台描述", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        keyword: [
          { required: true, message: "请输入关键词", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        logo: [{ required: true, message: "请上传logo", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入客服热线", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入客服邮箱", trigger: "blur" },
          {
            min: 10,
            max: 30,
            message: "长度在 10 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.$emit("routeName", "setting");

    getInfo().then((res) => {
      this.ruleForm.name = res.data.platformName;
      this.ruleForm.title = res.data.title;
      this.ruleForm.description = res.data.description;
      this.ruleForm.keyword = res.data.keyword;
      this.imageUrl = res.data.logo;
      this.ruleForm.phone = res.data.serviceHotline;
      this.ruleForm.email = res.data.serviceEmail;
    });
  },

  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
      this.formData.append("logo", this.imageUrl);
    },
    selectPicUpload(file, aaa) {
      this.imageUrl = URL.createObjectURL(file.file);
      console.log(this.imageUrl);
      this.formData.append("logo", file.file);
    },
    refresh() {
      this.reload();
    },
    submitForm() {
      let data = qs.stringify({
        aaa: "",
        keyword: this.ruleForm.keyword,
        platformName: this.ruleForm.name,
        serviceEmail: this.ruleForm.email,
        serviceHotline: this.ruleForm.phone,
        title: this.ruleForm.title,
        description: this.ruleForm.description,
        bbb: "",
      });

      updateInfoPhoto(this.formData).then((res) => {
        console.log(res);
      });
      updateInfo(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "更新平台信息成功",
            type: "success",
          });
        } else {
          this.$message.error("更新平台信息失败");
        }
      });
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  margin-left: 80%;
}

.setting-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 80%;
  margin-left: 10%;
}
.setting-content-title {
  font-size: 14px;
  margin-top: 20px;
  padding-left: 20px;
  border: 1px solid #e4e4e4;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.el-form {
  margin-top: 50px;
  width: 400px;
  margin-left: 50%;
  transform: translate(-70%);
}

.submit {
  margin-left: 50%;
  transform: translateX(-60%);
  margin-top: 30px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
